<template>
  <div class="more">
    <section v-for="(v, i) in more" :key="i">
      <img :src="v.src" alt="" />
      <p>{{ v.p }}</p>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      more: [
        { src: "./img/wode_46.jpg", p: "收藏夹" },
        { src: "./img/wode_40.jpg", p: "找回订单" },
        { src: "./img/wode_43.jpg", p: "帮助中心" },
        { src: "./img/wode_52.jpg", p: "申请成为代理" },
        { src: "./img/wode_51.jpg", p: "我的足迹" },
        { src: "./img/wode_54.jpg", p: "淘宝授权" },
        { src: "./img/wode_59.jpg", p: "公众号服务" },
      ],
    };
  },
};
</script>

<style scoped>
.more {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  border-top: 5rem solid #fafafa;
}
.more section {
  text-align: center;
  margin: 18rem 0;
  width: 33%;
}
.more p {
  font-size: 12rem;
}
.more section img {
  width: 20rem;
  height: 19rem;
  margin-bottom: 9rem;
}
</style>
